import * as BABYLON from "babylonjs";
import * as GUI from 'babylonjs-gui'

import type { Mesh } from "babylonjs";


import Base from "../Base";


export default class Agv {
    private base: Base;
    public agv: Mesh
    public labelObj: TTextBlockObj
    constructor() {
        this.base = Base.getInstance()
        this.agv = this.createAgv()
        this.labelObj = this.createLabel()
        this.registerEvent()
    }

    private createAgv() {
        const faceUV = [];
        faceUV[0] = new BABYLON.Vector4(0, 0, 0, 0); //rear face
        faceUV[1] = new BABYLON.Vector4(0, 0, 0, 0); //front face
        faceUV[2] = new BABYLON.Vector4(0, 0, 0, 0); //right side
        faceUV[3] = new BABYLON.Vector4(0, 0, 0, 0); //left side
        faceUV[4] = new BABYLON.Vector4(0, 0, 1.0, 1.0); //top side
        faceUV[5] = new BABYLON.Vector4(0, 0, 0, 0); //down side

        const boxMat = new BABYLON.StandardMaterial("boxMat");
        boxMat.diffuseTexture = new BABYLON.Texture("/arrow.svg");
        boxMat.emissiveTexture = new BABYLON.Texture("/white.svg")
        boxMat.disableLighting = true

        const box = BABYLON.MeshBuilder.CreateBox("agv", {
            faceUV: faceUV,
            width: 1,
            height: 0.3
        })
        box.material = boxMat;
        box.position.y = 0.5

        return box
    }

    private createLabel() {

        const advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

        // 创建一个容器

        const panel = new GUI.Rectangle();
        panel.width = "100px";
        panel.height = "50px";
        panel.cornerRadius = 5;
        panel.color = "Green";
        panel.thickness = 1;
        panel.background = "rgba(255,255,255,0.8)";
        panel.linkOffsetY = -150;
        panel.linkOffsetX = 100;

        advancedTexture.addControl(panel);
        panel.linkWithMesh(this.agv);

        const battery = new GUI.TextBlock();
        battery.fontSize = "12px";
        battery.fontWeight = "bold"
        battery.paddingTop = -15;
        battery.text = "🔋:"
        panel.addControl(battery);

        const speed = new GUI.TextBlock();
        speed.fontSize = "12px";
        speed.fontWeight = "bold"
        speed.paddingTop = 20;
        speed.text = "️🚗:"
        panel.addControl(speed);


        const line = new GUI.Line();
        line.lineWidth = 2;
        line.color = "White";
        line.y2 = 30;
        line.linkOffsetY = -0;
        line.connectedControl = panel;

        advancedTexture.addControl(line);
        line.linkWithMesh(this.agv);

        return {
            battery,
            speed
        }

    }

    public moveAgv(x: number, y: number, angle: number) {
        this.agv.position = new BABYLON.Vector3(x, 0.5, y)
        this.agv.rotation.y = -angle
    }


    public changeLabel(labelObj: TLabel) {
        this.labelObj.battery.text = `🔋:${(labelObj.battery * 100).toFixed(1)}%`
        this.labelObj.speed.text = `️🚗:${labelObj.speed.toFixed(2)}m/s`
    }

    private registerEvent() {

        document.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'd':
                    // 执行上移操作
                    this.agv.position.x += 0.5
                    break;
                case 's':
                    // 执行左移操作
                    this.agv.position.z -= 0.5
                    break;
                case 'a':
                    // 执行下移操作
                    this.agv.position.x -= 0.5
                    break;
                case 'w':
                    // 执行右移操作
                    this.agv.position.z += 0.5
                    break;
            }
        });


    }


}

